import React, { useState } from 'react'
import CarouselCard from './CarouselCard'

const Carousel2 = ({ children }) => {
  const count = React.Children.count(children)
  if (count <= 1 && !children.every((el) => el.type === CarouselCard)) {
    throw new Error('Carousel1 的children必须为CarouselCard元素的数组,而且长度不小于2')
  }
  const [current, setCurrent] = useState(0)
  const currentCard = React.cloneElement(children[current], { ...children[current].props, className: children[current].props.className + ' item animate' })

  return (
    <div>
      <div className="carousel2">
        <div className="item animate">{currentCard}</div>
        <button
          onClick={() => {
            const next = current - 1
            setCurrent(next < 0 ? 'count-1' : next)
          }}
        >
          {'<'}
        </button>
        <button
          onClick={() => {
            const next = current + 1
            setCurrent(next >= count ? 0 : next)
          }}
        >
          {'>'}
        </button>
      </div>
    </div>
  )
}

export default Carousel2
